<template>
  <div class="app-container">
    <el-form :model="searchForm" label-width="80px" @keyup.enter.native="search()">
      <el-row>
        <el-col class="datePicker">
          <el-form-item label="时间区间" size="small">
            <el-date-picker type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" v-model="searchForm.startTimeStr"
            ></el-date-picker>
            <span>-</span>
            <el-date-picker type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" v-model="searchForm.endTimeStr"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="searchBtn">
          <el-form-item size="small">
            <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="container">
      <ul class="company">
        <li>
          收入
        </li>
        <li v-for="item in companyDetails">
          <div class="li-left">
            <el-tooltip :content="item.name" placement="top-start">
              <span class="nowrap">{{item.name}}</span>
            </el-tooltip>
          </div>
          <div v-if="item.class" class="li-right payment-click" @click="paymentClick(item)">
            {{item.value}}万元
          </div>
          <div class="li-right" v-else>
            {{item.value}}万元
          </div>
        </li>
      </ul>
      <div v-for="spendListOne in spendList">
        <ul>
          <li>
            支出
          </li>
          <li v-for="item in spendListOne">
            <div class="li-left">
              <el-tooltip :content="item.name" placement="top-start">
                <span class="nowrap">{{item.name}}</span>
              </el-tooltip>
            </div>
            <div v-if="item.class" class="li-right payment-click" @click="paymentClick(item)">
              {{item.value}}万元
            </div>
            <div class="li-right" v-else>
              {{item.value}}万元
            </div>
          </li>
        </ul>
      </div>
    </div>
    <el-dialog title="详情" :visible.sync="outerVisible" width="1100px">
      <component :view-detail-list="viewDetailList" :is="propComponent" keep-alive></component>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getCompanyDetails
  } from '@/api/paymentdetails'

  import costProjectCompany from './component/costProjectCompany'
  import otherManagement from './component/otherManagement'
  import recyclingRent from './component/recyclingRent'
  import recyclingWage from './component/recyclingWage'
  import recyclingTax from './component/recyclingTax'
  import costProjectTotal from './component/costProjectTotal'
  import costProjectTwo from './component/costProjectTwo'
  import costProjectFour from './component/costProjectFour'
  import wageCost from './component/wageCost'
  import welfareOther from './component/welfareOther'

  export default {
    components: {
      costProjectCompany,
      otherManagement,
      recyclingRent,
      recyclingWage,
      recyclingTax,
      costProjectTotal,
      costProjectTwo,
      costProjectFour,
      wageCost,
      welfareOther
    },
    data() {
      return {
        searchForm: {},
        companyDetails: [],
        spendList: [],
        outerVisible: false,
        propComponent: '',
        viewDetailList: {}
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.companyDetails = []
        this.spendList = []
        getCompanyDetails(this.searchForm).then(response => {
          let companySum = 0
          let spendSum = 0
          const data = response.responseBody
          const companyDetails = [
            { name: '公司项目到账', value: data.costProjectCompany, class: 'costProjectCompany', type: 1 },
            { name: '管理费收入(项目关联)', value: data.managementIncome, class: 'costProjectCompany', type: 2 },
            { name: '管理费收入', value: data.otherManagement, class: 'otherManagement', type: 7 },
            { name: '其他收入', value: data.otherIncome, class: 'otherManagement', type: 8 },
            { name: '收回房租水电', value: data.recyclingRent, class: 'otherManagement', type: 1 },
            { name: '收回办公费用', value: data.recyclingOffice, class: 'otherManagement', type: 2 },
            { name: '收回人员费用', value: data.recyclingWage, class: 'otherManagement', type: 3 },
            { name: '收回税金', value: data.recyclingTax, class: 'recyclingTax' },
            // { name: '收回福利费', value: data.welfareOther, class: 'welfareOther', type: 2 },
            { name: '利息收入', value: data.interestIncome, class: 'costProjectTotal' }
          ]
          companyDetails.forEach(val => {
            companySum += val.value
          })
          companyDetails.push({ name: '合计', value: Math.round(companySum * 1000000) / 1000000 || 0 })
          this.companyDetails = [...companyDetails]

          const spendList = [
            { name: '固定资产', value: data.fixedAssets, class: 'costProjectTotal' },
            { name: '培训费', value: data.trainingFee, class: 'costProjectTotal' },
            { name: '外包设计费', value: data.outDesignFee, class: 'costProjectTotal' },
            { name: '图文费用', value: data.graphicFee, class: 'costProjectTotal' },
            { name: '差旅费用', value: data.travelFee, class: 'costProjectTotal' },
            {
              name: '工资、社保',
              value: Math.round((data.wageFee + data.socialSecurity) * 1000000) / 1000000 || 0,
              class: 'costProjectTwo',
              typeName1: '工资',
              typeName2: '社保'
            },
            {
              name: '城建、教育等附加税+印花税+工会经费+残保金',
              value: Math.round((data.eduAddOn + data.stampDuty + data.unionFunds + data.disabilityProtection) * 1000000) / 1000000 || 0,
              class: 'costProjectFour', typeName1: '城建、教育等附加税', typeName2: '印花税', typeName3: '工会经费', typeName4: '残保金'
            },
            { name: '个人所得税', value: data.personalIncomeTax, class: 'costProjectTotal' },
            { name: '中介费', value: data.agencyFee, class: 'costProjectTotal' },
            { name: '借款', value: data.loan, class: 'costProjectTotal' },
            { name: '投资款', value: data.investmentFunds, class: 'costProjectTotal' },
            { name: '出场费', value: data.appearanceFee, class: 'costProjectTotal' },
            { name: '资质费用', value: data.qualificationFee, class: 'costProjectTotal' },
            { name: '勘察费', value: data.surveyFee, class: 'costProjectTotal' },
            { name: '车辆费用', value: data.carFee, class: 'costProjectTotal' },
            { name: '工程款', value: data.projectFee, class: 'costProjectTotal' },
            { name: '技术服务费', value: data.technologyFee, class: 'costProjectTotal' },
            { name: '福利费', value: data.welfareFee, class: 'costProjectTotal' },
            { name: '业务提成费', value: data.businessRoyalty, class: 'costProjectTotal' },
            { name: '雕塑制作', value: data.sculptureProduction, class: 'costProjectTotal' },
            { name: '办公费', value: data.officeFee, class: 'costProjectTotal' },
            { name: '劳务费', value: data.laborCosts, class: 'costProjectTotal' },
            { name: '营业外支出', value: data.outBusinessFee, class: 'costProjectTotal' },
            { name: '企业所得税', value: data.corporateIncomeTax, class: 'costProjectTotal' },
            { name: '增值税', value: data.vat, class: 'costProjectTotal' },
            { name: '往来款', value: data.currentPayment, class: 'costProjectTotal' },
            { name: '交通费', value: data.transportationFee, class: 'costProjectTotal' },
            { name: '业务招待费', value: data.businessEntertainment, class: 'costProjectTotal' },
            { name: '模型制作费', value: data.modelMakeFee, class: 'costProjectTotal' },
            { name: '公积金', value: data.providentFund, class: 'costProjectTotal' },
            { name: '效果图设计费', value: data.renderingFee, class: 'costProjectTotal' },
            { name: '项目服务费', value: data.projectServiceFee, class: 'costProjectTotal' },
            { name: '多媒体制作费', value: data.multimediaFee, class: 'costProjectTotal' },
            { name: '保险费', value: data.insurance, class: 'costProjectTotal' },
            { name: '广告费', value: data.announcementFee, class: 'costProjectTotal' },
            { name: '银行手续费', value: data.bankFee, class: 'costProjectTotal' },
            { name: '担保费', value: data.guaranteeFee, class: 'costProjectTotal' },
            {
              name: '物业房租水电费',
              value: data.rentWaterFee,
              class: 'costProjectTwo',
              typeName1: '物业房租费',
              typeName2: '物业费水电费'
            }
          ]
          spendList.forEach(val => {
            spendSum += val.value
          })
          spendList.push({ name: '合计', value: Math.round(spendSum * 1000000) / 1000000 || 0 })
          for (var i = 0; i < spendList.length; i += 14) {
            this.spendList.push(spendList.slice(i, i + 14))
          }
          console.log(this.spendList)
        })
      },
      search() {
        this.fetchData()
      },
      paymentClick(item) {
        this.outerVisible = true
        this.propComponent = item.class
        this.viewDetailList = {
          name: item.name,
          startTimeStr: this.searchForm.startTimeStr || '',
          endTimeStr: this.searchForm.endTimeStr || ''
        }
        if (item.type) {
          this.viewDetailList.type = item.type
        }
        if (item.class === 'costProjectTotal') {
          if (item.name === '利息收入') {
            this.viewDetailList.typeName = '利息'
          } else {
            this.viewDetailList.typeName = item.name
          }
        }
        if (item.class === 'costProjectTwo') {
          this.viewDetailList.typeName1 = item.typeName1
          this.viewDetailList.typeName2 = item.typeName2
        }
        if (item.class === 'costProjectFour') {
          this.viewDetailList.typeName1 = item.typeName1
          this.viewDetailList.typeName2 = item.typeName2
          this.viewDetailList.typeName3 = item.typeName3
          this.viewDetailList.typeName4 = item.typeName4
        }
      }
    },
    mounted() {
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container {
    .container {
      display: flex;
      flex-direction: row;
      ul {
        width: 300px;
        border: 1px solid #ebeef5;
        li {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding: 10px;
          border-bottom: 1px solid #ebeef5;
          div {
            &.li-left {
              flex-grow: 1;
              text-align: left;
              .nowrap {
                display: block;
                width: 150px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
            &.li-right {
              min-width: 130px;
              text-align: right;
            }
            &.payment-click:hover {
              cursor: pointer;
              color: #409EFF;
            }
          }
          &:last-child {
            border-bottom: none;
          }
        }
        &.company li:last-child {
          border-bottom: 1px solid #ebeef5;
        }
      }
    }
    .table-btn {
      margin-bottom: 20px;
    }
  }

</style>


<style rel="stylesheet/scss" lang="scss">

</style>
